const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} =  require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const glob = require('glob');
const entryFiles = glob.sync('./src/entries/*.js');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
let entry={};
let htmlWebpackPlugins = [];//index.js login.js register.js
entryFiles.forEach(entryFile=>{
    let entryName = path.basename(entryFile, '.js');
    entry[entryName]=entryFile;
    htmlWebpackPlugins.push(new HtmlWebpackPlugin({
            template:`./src/pages/${entryName}.html`,
            filename:`${entryName}.html`,
            chunks:[entryName],
            chunksSortMode:'manual'
    }));
});
// env代表env参数 argv代表所有的参数
module.exports = {
    entry:'./src/index.js',
    //entry, 
    //因为开发环境下和生产环境下的webpack配置有很多不一样的地方
    
    //entry如果是一个文件的话那就是单入口
    /**
Conflict: Multiple chunks emit assets to the same filename bundle.js (chunks index and login)
    如果是单入品，chunk的名字就叫main,每个chunk一般都会生成一个文件
     */
    //配置哪些模块不需要读取并且转成语法树进行解析依赖
  
    ///这个选项是用来指定如何查找loader
    resolveLoader:{
      modules:["node_modules","loaders"],
    },
    //定制一些查找文件的规则
    resolve:{
        extensions:['.js','.jsx','.json'],
        alias:{
           // 'bootstrap':path.join(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css')
        },//第一个可以减少查找的路径，提高查找速度，第二个还可以添加额外的查找路径
        modules:["node_modules","zfmodules"],
        mainFields:["style",'browser', 'module', 'main'],
        mainFiles:["index.js","main.js"]
    },
    
    output:{
        path:path.join(__dirname,'dist'),//输出的目录，只能是绝对目录
        filename:'[name].[hash].js',// hash chunkhash contenthash都可以使用
        publicPath:'http://img.zhufengpeixun.cn'//根路径 在浏览器里访问的时候要以什么路径访问     xx.jpg
    },
    //Cannot use [chunkhash] or [contenthash] for chunk in '[name].[hash].[chunkhash].js' (use [hash] instead)
    //只要改一个文件，所有hash.都会变吗没错
    //hash chunkHash contentHash
    //如果你使用了devServer,那么所有产出的文件都会写到内存里，而不是写入到硬盘上
 
 /*    externals:{//html-webpack-externals-plugin
        'jquery':"jQuery"//key是jquery，是一个包的名字，值是jQuery,是全局的变量名
    }, */
    module:{
        noParse: /jquery|lodash/,
        rules:[
          /*   {
                test:/\.(js)$/,
                loader:'eslint-loader',
                enforce:'pre',//强制提前执行
                include:path.join(__dirname,'src'),//只校验自己写的代码
                exclude:/node_modules///不校验node_modules下面的文件
            }, */
            {
                test:/\.(js)$/,
                use:'babel-loader'
            },
           /*  {
                test: /\.css$/i,
                use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: {
                    importLoaders: 2,
                    // 0 => no loaders (default);
                    // 1 => postcss-loader;
                    // 2 => postcss-loader, sass-loader
                    },
                },
                'postcss-loader',
                'sass-loader',
                ],
            }, */
            
            {
                test:/\.css$/,//如果要require或import的文件是css的文件的话
                //从右向左处理CSS文件,oader是一个函数
                use:[{
                    loader:MiniCssExtractPlugin.loader,
                    options:{
                        publicPath: (resourcePath, context) => {
                            console.log(resourcePath, context);
                            return '../../';
                        }
                         //publicPath: '../../'
                    }
                },{
                    loader:'css-loader',
                    options:{
                        //Enables/Disables or setups number of loaders applied before CSS loader.
                        importLoaders:0
                    }
                },{
                    loader:'postcss-loader',
                    options:{
                        plugins:[
                            require('autoprefixer')
                        ]
                    }
                }]
            },
             {
                test:/\.less$/,//如果要require或import的文件是css的文件的话
                //从右向左处理CSS文件,oader是一个函数
                use:[MiniCssExtractPlugin.loader,{
                    loader:'css-loader',
                    options:{
                        //Enables/Disables or setups number of loaders applied before CSS loader.
                        importLoaders:0
                    }
                },
                {
                    loader:'postcss-loader',
                    options:{
                        plugins:[
                            require('autoprefixer')
                        ]
                    }
                },'less-loader']
            },
             {
                test:/\.scss$/,//如果要require或import的文件是css的文件的话
                //从右向左处理CSS文件,oader是一个函数
                use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader']
            },
           /*  {
                test:/\.(jquery)$/,
                loader:'expose-loader?$'
            }, */
            {
                test:/\.(html|htm)$/,
                loader:'html-withimg-loader'
            },
            {
                test:/\.(ttf|svg|eot|woff|woff2|otf)/,
                use:{
                    loader:'url-loader'
                }
            }
        ]
    },
    stats:'normal',
    plugins:[
        new FriendlyErrorsWebpackPlugin(),
        //此插件会自动向所有的模块注入一个_变量，引用的就是lodash模块
        //这种注入模块相当于向模块内部注入了一个局部变量
        new webpack.ProvidePlugin({
            _:'lodash',
            $:'jquery'
        }), 
        //...htmlWebpackPlugins,
         //这个插件是产出html文件,在编译的时候，会读取模板文件，
        new HtmlWebpackPlugin({
            template:'./src/index.html',//指定模板文件
            filename:'index.html',//产出后的文件名
            hash:true,//为了避免缓存，可以在产出的资源后面添加hash值
            chunks:['main'],
            chunksSortMode:'manual'//对引入代码块进行排序的模式
        }),
        /*  new HtmlWebpackPlugin({
            template:'./src/index.html',//指定模板文件
            filename:'login.html',//产出后的文件名
            hash:true,//为了避免缓存，可以在产出的资源后面添加hash值
            chunks:['login']
            //chunksSortMode:'manual'//对引入代码块进行排序的模式
        }), */
       /*  new CopyWebpackPlugin(
           [{
                from:path.join(__dirname,'src/assets'),
                to:path.join(__dirname,'dist/assets')
           }]
        ), */
        new CleanWebpackPlugin({
             cleanOnceBeforeBuildPatterns: ['**/*'],
        }),
        new MiniCssExtractPlugin({
            filename:'css/[name].[contenthash].css',//name是代码码chunk的名字
            
            //chunkFilename:'[id].css'//在异步加载的时候用的？
        }),
        //new webpack.IgnorePlugin(/^\.\/locale/,/moment$/)   
       /*  new HtmlWebpackExternalsPlugin({
            externals:[
                {
                    module:'jquery',//模块名
                    entry:'https://cdn.bootcss.com/jquery/3.4.1/jquery.js',//CDN的脚本路径
                    global:'jQuery'//从全局对象的哪个属性上获取导出的值
                }
            ]
        }) */
    ]
}